{include file="public/header,public/nav,public/fixbar" title="<?php echo $info['name']?>-<?php echo request()->pc_info['seo_title']?>"/}
<div class="practice-header">
    <div class="layui-container" style="padding: 0 15px;">
        <div class="space-between">
            <a href="javascript:;" class="align-items-center layui-font-16 exit-exam" style="width: 60px;"><i class="layui-icon layui-icon-left margin-right-5"></i>退出</a>
            <h3 class="justify-content-center"><img src="/static/images/rank/title_decorate_icon.png"><span class="practice-header-title">{$info.name}</span><img src="/static/images/rank/title_decorate_icon.png"></h3>
            <p class="align-items-center">
                <i class="layui-icon layui-icon-time margin-right-10"></i>
                <span class="margin-right-10 text">用时</span>
                <span class="layui-font-18">
                    <span id="hours">00</span>:
                    <span id="minutes">00</span>:
                    <span id="seconds">00</span>
                </span>
            </p>
        </div>
    </div>
</div>
<div class="layui-body padding-top-130">
    <div class="layui-container">
        <div class="layui-main min-height-65vh layui-padding-4">
            <form class="layui-form" autocomplete="off" lay-filter="val-filter">
                <input name="id" type="hidden" class="layui-input" value="{$info.id ?? ''}">
                <input name="practice_id" type="hidden" class="layui-input" value="{$info.practice_id ?? ''}">
                {if !$question_list}
                    <div class="layui-empty"><img src="/static/images/nodata/no_exam.png"><p>暂无考试内容~</p></div>
                {else}
                    {foreach $question_list as $key => $v}
                        <div class="layui-card question-card layui-padding-4" id="question_{$v.id}">
                            <div class="qustions-item">
                                <span class="order">{$key+1}.</span>
                                <span class="lable">{$v.type_name}</span>
                                {if $v.type == 9}
                                    <span class="text">根据以下材料，回答问题</span>
                                    <div class="layui-elem-quote margin-top-15">
                                        <div class="rich-text-container">
                                            <div class="rich-text-content">{$v.material|raw}</div>
                                        </div>
                                    </div>
                                {else}
                                    <span class="text">{$v.question|raw}</span>
                                {/if}
                            </div>
                            <div class="question-options">
                                {if $v.type == 4 || $v.type == 6 || $v.type == 7}
                                    <!-- 问答题、写作题、论述题 -->
                                    <div class="options">
                                        <textarea name="answer[{$v.id}]" placeholder="请输入你的答案" class="layui-textarea">{$v.practice_detail.answer[0] ?? ''}</textarea>
                                    </div>
                                {elseif $v.type == 5}
                                    <!-- 填空题 -->
                                    <div style="padding: 0px 10px;">
                                        <div class="layui-tab layui-tab-brief">
                                            <ul class="layui-tab-title">
                                                {foreach $v['options'] as $ks => $val}
                                                    <li class="layui-font-16 {if $ks == 0}layui-this{/if}">第{$ks+1}空</li>
                                                {/foreach}
                                            </ul>
                                            <div class="layui-tab-content">
                                                {foreach $v['options'] as $ks => $val}
                                                <div class="layui-tab-item {if $ks == 0}layui-show{/if}">
                                                    <textarea name="answer[{$v.id}][{$ks}]" placeholder="请输入你的答案" class="layui-textarea">{$v.practice_detail.answer[$ks] ?? ''}</textarea>
                                                </div>
                                                {/foreach}
                                            </div>
                                        </div>
                                    </div>
                                {elseif $v.type == 9}
                                    <!-- 材料题 -->
                                    <div style="padding: 0px 10px;">
                                        <div class="layui-tab layui-tab-brief">
                                            <ul class="layui-tab-title">
                                                {foreach $v['children'] as $m_key => $m_v}
                                                <li class="layui-font-16 {if $m_key == 0}layui-this{/if}">第{$m_key+1}题</li>
                                                {/foreach}
                                            </ul>
                                            <div class="layui-tab-content">
                                                {foreach $v['children'] as $m_key => $m_v}
                                                <div class="layui-tab-item {if $m_key == 0}layui-show{/if}">
                                                    <div id="question_{$m_v.id}">
                                                        <div class="qustions-item">
                                                            <span class="lable">{$m_v.type_name}</span>
                                                            <span class="text">{$m_v.question|raw}</span>
                                                        </div>
                                                    </div>
                                                    <div class="question-options">
                                                        {if $m_v.type == 4 || $m_v.type == 6 || $m_v.type == 7}
                                                        <div class="options">
                                                            <textarea name="answer[{$m_v.id}]" placeholder="请输入你的答案" class="layui-textarea">{$m_v.practice_detail.answer[0] ?? ''}</textarea>
                                                        </div>
                                                        {elseif $m_v.type == 5}
                                                            <div style="padding: 0px 10px;">
                                                                <div class="layui-tab layui-tab-brief">
                                                                    <ul class="layui-tab-title">
                                                                        {foreach $m_v['options'] as $m_ks => $m_val}
                                                                            <li class="layui-font-16 {if $m_ks == 0}layui-this{/if}">第{$m_ks+1}空</li>
                                                                        {/foreach}
                                                                    </ul>
                                                                    <div class="layui-tab-content">
                                                                        {foreach $m_v['options'] as $m_ks => $m_val}
                                                                        <div class="layui-tab-item {if $m_ks == 0}layui-show{/if}">
                                                                            <textarea name="answer[{$m_v.id}][{$m_ks}]" placeholder="请输入你的答案" class="layui-textarea">{$m_v.practice_detail.answer[$m_ks] ?? ''}</textarea>
                                                                        </div>
                                                                        {/foreach}
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        {else}
                                                            {foreach $m_v['options'] as $m_ks => $m_val}
                                                            <div class="layui-row margin-bottom-5">
                                                                {if $m_v['type'] == 2 || $m_v['type'] == 8}
                                                                    <input type="checkbox" name="answer[{$m_v.id}][{$m_ks}]" value="{$m_val['k']}" lay-skin="none" {if $m_v.practice_detail && ($m_v.practice_detail.answer[$m_ks] == $m_val['k'])} checked {/if}>
                                                                {else}
                                                                    <input type="radio" name="answer[{$m_v.id}]" value="{$m_val['k']}" lay-skin="none" {if $m_v.practice_detail && ($m_v.practice_detail.answer[0] == $m_val['k'])} checked {/if}>
                                                                {/if}
                                                                <div lay-radio class="lay-skin-checkcard">
                                                                    <div class="lay-skin-checkcard-detail">
                                                                        <div class="options {if $m_v['type'] == 2 || $m_v['type'] == 8}options-multiple{/if}">
                                                                            {if $m_v['type'] == 3}
                                                                            <div class="lable"><?php echo strtoupper($m_val['k']);?></div>
                                                                            {else}
                                                                            <div class="lable">{$m_val['k']}</div>
                                                                            {/if}
                                                                            <div class="content">{$m_val['c']|raw}</div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                            {/foreach}
                                                        {/if}
                                                    </div>
                                                </div>
                                                {/foreach}
                                            </div>
                                        </div>
                                    </div>
                                {else}
                                    <!-- 单选题、多选题、判断题 -->
                                    {foreach $v['options'] as $ks => $val}
                                        <div class="layui-row margin-bottom-5">
                                            {if $v['type'] == 2 || $v['type'] == 8}
                                                <input type="checkbox" name="answer[{$v.id}][{$ks}]" value="{$val['k']}" lay-skin="none" {if $v.practice_detail && ($v.practice_detail.answer[$ks] == $val['k'])} checked {/if}>
                                            {else}
                                                <input type="radio" name="answer[{$v.id}]" value="{$val['k']}" lay-skin="none" {if $v.practice_detail && ($v.practice_detail.answer[0] == $val['k'])} checked {/if}> 
                                            {/if}
                                            <div {if $v['type'] == 2 || $v['type'] == 8} lay-checkbox {else} lay-radio {/if}class="lay-skin-checkcard">
                                                <div class="lay-skin-checkcard-detail">
                                                    <div class="options {if $v['type'] == 2 || $v['type'] == 8}options-multiple{/if}">
                                                        {if $v['type'] == 3}
                                                        <div class="lable"><?php echo strtoupper($val['k']);?></div>
                                                        {else}
                                                        <div class="lable">{$val['k']}</div>
                                                        {/if}
                                                        <div class="content">{$val['c']|raw}</div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    {/foreach}
                                {/if}
                            </div>
                        </div>
                    {/foreach}
                {/if}
                <div class="hr-line"></div>
                <div class="layui-form-item text-align-center">
                    <button style="width:240px;" class="layui-btn layui-btn-xl layui-bg-success" id="saveBtn" lay-submit lay-filter="saveBtn">
                        <i class="layui-icon layui-icon-ok layui-font-20"></i>
                        确认交卷
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<script type="text/javascript">
    layui.use(['form','util','layer','richTextToggle'], function(){
        var util = layui.util, layer = layui.layer, form = layui.form, richTextToggle = layui.richTextToggle, $ = layui.$;

        form.render();
        
        var product_id = "{$info.id}";
        // 计时器变量
        var timer = null;
        var isRunning = false;
        var startTime = 0;
        var elapsedTime = 0;
        
        // DOM元素
        var hoursElement = document.getElementById('hours');
        var minutesElement = document.getElementById('minutes');
        var secondsElement = document.getElementById('seconds');

        // 更新显示
        function updateDisplay() {
            var totalMilliseconds = elapsedTime;
            var hours = Math.floor(totalMilliseconds / 3600000);
            var minutes = Math.floor((totalMilliseconds % 3600000) / 60000);
            var seconds = Math.floor((totalMilliseconds % 60000) / 1000);
            
            hoursElement.textContent = hours.toString().padStart(2, '0');
            minutesElement.textContent = minutes.toString().padStart(2, '0');
            secondsElement.textContent = seconds.toString().padStart(2, '0');
        }

        $(function(){
            startTimer();
        })

        // 开始计时
        function startTimer() {
            if (!isRunning) {
                isRunning = true;
                startTime = Date.now() - elapsedTime;
                
                timer = setInterval(function() {
                    elapsedTime = Date.now() - startTime;
                    updateDisplay();
                }, 10); // 每10毫秒更新一次，以实现更流畅的显示
            }
        }

        // 初始化
        richTextToggle.init('.rich-text-content', {
            maxLines: 10, // 显示更多行
            expandText: '展开全部',
            collapseText: '收起全文',
            showMask: false // 不需要遮罩
        });

        form.on('submit(saveBtn)', function(data){
            var loading = layer.msg('数据处理中..', {icon: 16,shade: 0.3,time: false});
            data.field.exit = 0;
            $.ajax({
                url:'/exam/practice_submit',
                type:'post',
                data:data.field,
                dataType:"JSON",
                headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                success:function(res){
                    layer.close(loading);  //返回数据关闭loading
                    if(res.code == 0){
                        $("#saveBtn").removeClass("layui-bg-success").addClass("layui-btn-disabled");
                        $("#saveBtn").attr("disabled","true");
                        layer.msg(res.msg,{icon: 1,time:1500},function(){
                            location.href = '/exam/practice_detail?product_id='+product_id;
                        });
                        
                    } else{
                        layer.msg(res.msg,{icon: 2});
                    }
                },
                error:function(e){
                    layer.msg('请求失败'+e.responseText,{icon: 2});
                },
                
            });
            return false;
        });

        // 退出考试
        $(".exit-exam").click(function(){
            layer.confirm('确定要退出吗？将为您保存当前做题进度', {
                skin: 'layui-layer-radius', // 弹窗主题样式
                title : '操作确认',
            },function(index){
                var loading = layer.msg('数据处理中..', {icon: 16,shade: 0.3,time: false});

                var data = form.val('val-filter');
                data.exit = 1;
                $.ajax({
                    url:'/exam/practice_submit',
                    type:'post',
                    data:data,
                    dataType:"JSON",
                    headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                    success:function(data){
                        layer.close(loading);  //返回数据关闭loading
                        if(data.code == 0){
                            layer.msg('保存成功',{icon: 1,time:1500},function(){
                                location.href = '/exam/practice_detail?product_id='+product_id;
                            });
                        }
                        else{
                            layer.msg(data.msg,{icon: 2});
                        }
                    },
                    error:function(e){
                        layer.msg('请求失败'+e.responseText,{icon: 2});
                    },
                    
                });
            });
        })
    });
</script>